<!--  -->
<template>
  <div>
       <!-- S 店铺列表 -->
      <div class="wrapper__store">
        <p style="font-size: .16rem; font-weight: bold; margin: .22rem 0;">附近店铺</p>
        <div class="wrapper__store__item" v-for="(item,index) in storeList" :key="index">
          <div class="avatar"><img width="50" height="50" :src="item.img" alt=""></div>
          <div class="desc">
            <p class="store_name">{{ item.name }}</p>
            <p class="sale_trans">
              <span>月售{{ item.monthSale }}</span>
              <span>起送￥{{ item.beginTrans }}</span>
              <span>基础运费￥{{ item.freight }}</span>
            </p>
            <p class="vip">{{ item.vipDesc }}</p>
          </div>
        </div>
      </div>
      <!-- E 店铺列表 -->
  </div>
</template>

<script>
export default {
  name: 'StoreList',
  data () {
    return {
      storeList: [{
        img: 'https://img2.mukewang.com/5421817c0001e6a001800180-100-100.jpg',
        name: '沃尔玛',
        monthSale: '1万+',
        beginTrans: 20,
        freight: 50,
        vipDesc: 'VIP尊享版本出新了，快来体验吧'
      },
      {
        img: 'https://img2.sycdn.imooc.com/5fec666300017b0810801078-140-140.jpg',
        name: '鸿星尔克',
        monthSale: '100万+',
        beginTrans: 221,
        freight: 32,
        vipDesc: '鸿星尔克劝你理性消费'
      },
      {
        img: 'https://img1.sycdn.imooc.com/5fd0fa270001ff0502610261-140-140.jpg',
        name: '盼盼安全门',
        monthSale: '20万+',
        beginTrans: 54,
        freight: 12,
        vipDesc: '盼盼安全门，优惠活动正在进行中...'
      }]
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../style/mixin.scss';
.wrapper__store{
      .wrapper__store__item{
        display: flex;
        margin: .1rem 0;
        padding-bottom: .1rem;
        border-bottom: 1px solid #f1f1f1;
        img {
          background-color: orange;
          border-radius: 1rem;
        }
        .desc {
          margin-left: .16rem;
          width: 100%;
          .store_name{
            font-size: .15rem;
          }
          .sale_trans{
            margin: .1rem 0;
            span{
              font-size: .13rem;
            }
            span:nth-child(2){
              margin: 0 .16rem;
            }
          }
          p.vip{
            font-size: .12rem;
            color: #f51818bf;
            width: 80%;
            @include ellipsis
          }
        }
      }
      .wrapper__store__item:nth-last-child(1){
          border: none;
        }
    }
</style>
